<template>
  <transition>
    <div class="center-box center">
      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          text-color="#bfabfa"
          active-text-color="#FFD04B"
          router
      >
        <el-menu-item v-for="menu in menus" :index="menu.url" :key="menu.id">{{ menu.name }}</el-menu-item>
      </el-menu>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'center',
  components: {},
  data () {
    return {}
  },
  mounted () {
    console.log(this.menus,1111)
  },
  props: {
    menus: {
      type: Array,
      default () {
        return [
          {name: '菜单一', target: '_self', parentId: 0,url:'/'},
          {name: '菜单二', target: '_self', parentId: 0,url:'/'},
          {name: '菜单三', target: '_self', parentId: 0,url:'/'},
          {name: '菜单四', target: '_self', parentId: 0,url:'/'}
        ]
      }
    }
  }
}
</script>



<style lang="scss">
.center {
  position: fixed;
  top: 0;
  margin-top: 15px;
  left: 50%;
  display: none;
  transition: background-color 1.5s;
  transform: translate(-50%, 0);

  .center-box {
    background-color: transparent;
    position: relative;

    ::v-deep .el-menu {
      border-bottom: 0px;
      border-color: transparent;
      background-color: transparent;

      ::v-deep .el-menu-item {
        &:hover {
          border-bottom: 6px solid rgb(255, 208, 75) !important;
        }
      }

      ::v-deep .is-active[style] {
        border-bottom: none !important;
      }
    }
  }
}

</style>